<!-- @format -->

<template>
	<ma-chart :option="loginChartOptions" />
</template>

<script setup lang="ts">
	import { nextTick, onMounted, ref, defineProps } from "vue";
	import { graphic } from "echarts";
	const props = defineProps(["data"]);

	function graphicFactory(side) {
		return {
			type: "text",
			bottom: "8",
			...side,
			style: {
				text: "",
				textAlign: "center",
				fill: "#4E5969",
				fontSize: 12,
			},
		};
	}

	const graphicElements = ref([
		graphicFactory({ left: "2.6%" }),
		graphicFactory({ right: 0 }),
	]);

	const loginChartOptions = ref({});

	onMounted(() => {
		let nameList = [];
		let data = [];

		props.data.forEach((item) => {
			nameList.unshift(item.name);
			data.push(item.value);
		});
		loginChartOptions.value = {
			background: "transparent",
			tooltip: {
				trigger: "item",
				formatter: function (params) {
                return params.name + ': ' + params.value + '吨'; // 自定义 Tooltip 内容为百分比形式
            }
			},
			grid: {
				borderWidth: 0,
				top: "10%",
				left: "2%",
				right: "5%",
				bottom: "3%",
				containLabel: true,
			},
			yAxis: [
				{
					type: "category",
					position: "left",
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						show: true,
						inside: false,
						textStyle: {
							color: "#415B73",
							fontSize: "14",
							fontFamily: "PingFangSC-Regular",
						},
						formatter: function (val) {
							if (val.length > 16) {
								return val.substr(0, 15) + "...";
							}
							return val;
						},
					},
					splitArea: {
						show: false,
					},
					splitLine: {
						show: false,
					},
					data: nameList,
				},
				{
					type: "category",
					inverse: true,
					position: "left",
					axisTick: {
						show: false,
					},
					axisLine: {
						show: false,
					},
					axisLabel: {
						show: true,
						inside: true,
						textStyle: {
							color: "#7395B3",
							fontSize: "13",
							fontFamily: "Source Han Sans CN",
						},
					},
					offset: -15,
					data: data,
				},
			],
			xAxis: {
				type: "value",
				axisTick: {
					show: false,
				},
				axisLine: {
					show: false,
				},
				splitLine: {
					show: false,
				},
				axisLabel: {
					show: false,
				},
			},
			series: [
				{
					name: "",
					type: "bar",
					zlevel: 2,
					barWidth: "20px",
					data: nameList.map((item, index) => {
						// console.log('tag', index)
						let value = data[data.length - 1 - index]
						return {
							name: item,
							value,
							itemStyle: {
								normal: {
									show: true,
									color: new graphic.LinearGradient(
										0,
										0,
										1,
										0,
										[
											{
												offset: 0,
												color: "rgba(0,160,233,0)",
											},
											{
												offset: 0.98,
												color: "rgba(0,160,233,0.7)",
											},
											{
												offset: 1,
												color: "rgba(0,160,233,1)",
											},
										],
										false
									),
								},
								emphasis: {
									color: "rgba(198,163,255,0.5)",
									disabled: true,
								},
							},
						};
					}),
					animationDuration: 1500,
				},
			],
		};
	});
</script>

<style lang="less" scoped></style>
